import Vue from "vue";
import VueRouter from "vue-router";
import { roleCheck } from "./permission";
import store from "@/store";
import { tokenGet } from "@/utils/tokenManage";

Vue.use(VueRouter);
// 避免路由重复的错误信息
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch((err) => err);
};

const routes = [
  {
    path: "/",
    name: "home",
    component: () => import("../components/layout/Home.vue"),
    meta: {
      title: "首页",
    },
    redirect: {
      name: "homeContent",
    },

    children: [
      {
        path: "/homeContent",
        name: "homeContent",
        component: () => import("../views/home/index.vue"),
        meta: {
          title: "首页",
        },
      },

      {
        path: "/role",
        name: "role",
        component: () => import("../views/roles/index.vue"),
        meta: {
          title: "角色管理",
        },
      },

      {
        path: "/origin",
        name: "origin",
        component: () => import("../views/origin/index.vue"),
        meta: {
          title: "区域管理",
        },
      },

      {
        path: "/device",
        name: "device",
        component: () => import("../views/devices/index.vue"),
        meta: {
          title: "设备管理",
        },
      },

      {
        path: "/user",
        name: "user",
        component: () => import("../views/users/index.vue"),
        meta: {
          title: "用户管理",
        },
      },
      {
        path: "/userinfo",
        name: "userinfo",
        component: () => import("../views/users/userInfo.vue"),
        meta: {
          title: "用户编辑",
        },
      },

      {
        path: "/config",
        name: "config",
        component: () => import("../views/system/index.vue"),
        meta: {
          title: "系统配置",
        },
      },

      {
        path: "/log",
        name: "log",
        component: () => import("../views/log/index.vue"),
        meta: {
          title: "日志",
        },
        redirect: {
          name: "alarmlog",
        },
        children: [
          {
            path: "/alarmlog",
            name: "alarmlog",
            component: () => import("../views/log/alarmLog.vue"),
            meta: {
              title: "报警日志",
            },
          },
          {
            path: "/opendoorlog",
            name: "opendoorlog",
            component: () => import("../views/log/openDoorLog.vue"),
            meta: {
              title: "开门日志",
            },
          },
          {
            path: "/operlog",
            name: "operlog",
            component: () => import("../views/log/operLog.vue"),
            meta: {
              title: "平台操作日志",
            },
          },
        ],
      },
    ],
  },

  {
    path: "/login",
    name: "login",
    component: () => import("../views/login/index.vue"),
    meta: {
      title: "登录页",
    },
  },
];

const router = new VueRouter({
  routes,
});

router.beforeEach(async (to, from, next) => {
  // 权限控制
  if (["login"].includes(to.name)) {
    store.commit("DEL_ROUTER_ALL");
    next();
    return;
  }

  if (!tokenGet()) {
    next("/login");
    return;
  }

  // if (!roleCheck(to.name)) {
  //   Vue.prototype.$message.error("权限不足");
  //   return;
  // }

  // 动态修改 网站标题 - 基于路由
  let title = to.meta.title;
  if (
    to.matched &&
    to.matched[0] &&
    to.matched[0].meta &&
    to.matched[0].meta.title
  ) {
    document.title = title;
  }
  store.commit("PUSH_ROUTER", { name: to.name, title }); // 调用 mutation
  next();
});

router.afterEach(async (to, from) => { });

export default router;

/*
    只有一个 router 类
    每次路由跳转都会 生成一个route 的实例
      path: "/login",  -- url的路径
      name: "login",  -- 名称
      component: () => import("../views/login/Index.vue"),  -- 加载的页面
      meta: {  -- 带的参数 to.matched[1].meta.title
        title: "登录",
      },
      

    $router: 类的成员函数
     1.
        this.$router.push('/home');   // 跳转到 "/home" 路由
        this.$router.push({ name: 'home' }); // 使用命名路由跳转
        用于跳转到指定的路由。如果目标路由是当前路由，会抛出一个 NavigationDuplicated 错误（这也是上面你提到的重写 push 方法的原因）
     2.
        this.$router.replace('/home');  // 跳转并替换当前路由
        与 push 类似，但 replace 不会在浏览器历史记录中留下记录。也就是说，用户点击浏览器的返回按钮时，页面不会跳转到之前的路由。
     3.
        this.$router.go(-1);  // 后退一步，相当于浏览器的 "Back"
        this.$router.go(1);   // 前进一步，相当于浏览器的 "Forward"
        这个方法类似于浏览器的 history.go(n)，用于前进或后退指定的页面数。
     4.
        this.$router.back();  // 后退到上一页
        用于后退到上一页，类似于浏览器的后退按钮。
     5.
        this.$router.forward();  // 前进到下一页
        用于前进到下一页，类似于浏览器的前进按钮。
     6.
        const resolved = this.$router.resolve('/home');
        console.log(resolved); // 打印解析后的路径信息
        这个方法将给定的 location 解析为一个绝对路径。它会返回一个包含路径信息的对象。
     7.
        console.log(this.$router.currentRoute);  // 获取当前路由信息
        这是一个只读的属性，返回当前路由的状态对象，包含路由的路径、参数、查询等信息。
        currentRoute 是一个响应式对象，包含以下常见属性：
            path: 当前的路径（例如 /home）
            params: 动态路由参数（例如 /user/:id 中的 id）
            query: 查询参数（例如 /home?search=query 中的 search）
            hash: 路由的 hash 值（例如 #section1）
     8.
        beforeEach() / afterEach()
        this.$router.beforeEach((to, from, next) => {
            console.log('Before route change');
            next(); // 必须调用 next() 来继续导航
        });
        这些方法用于全局导航守卫，可以在路由跳转前或跳转后做一些操作。


    $route: 实例化对象属性
        1.$route.path --当前路由的路径。即浏览器的 URL 路径部分。
            例如，当前 URL 是 http://example.com/products/123，$route.path 就是 /products/123。
        2.$route.params -- 路由的动态参数。例如在路径中定义了 :id，那么可以通过 $route.params.id 获取该参数的值。
            例如，/products/:id 路径，访问 /products/123 时，$route.params.id 的值就是 123。
        3.$route.query --查询字符串的参数，通常是在 URL 的 ? 后面的一部分。例如，/search?q=vue，$route.query.q 就是 vue。
            如果 URL 是 http://example.com/search?q=vue&page=2，则 $route.query 是 { q: 'vue', page: '2' }。
        4.$route.hash --URL 中的哈希值（#后面的部分）。如果 URL 是 http://example.com/#about，那么 $route.hash 就是 #about。
        5.$route.name --当前路由的名称（如果定义了 name 属性）。
            用于根据路由名称导航，而不是根据路径进行导航。
        6.$route.matched --当前路由的匹配记录数组。每一项记录包含了匹配到的路由规则。
            用于获取路由的嵌套信息（比如子路由的匹配情况）。
        7.$route.fullPath  --完整的 URL 路径，包括路径、查询字符串和哈希部分。
            例如，/products/123?q=vue#overview 就是一个完整路径。
        8.$route.redirectedFrom --如果当前路由是由重定向引起的，redirectedFrom 会提供原始的 URL。
*/
